<template>
  <!-- 上传图片 -->
  <div>
     <div class="box-images" v-if="type=='images'" >
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          :file-list="multiImageUploadList"
          :http-request="uploadImages"
          :on-change="imagesControlChange"
          :on-remove="imagesControlRemove"
          :before-upload="beforeImageUpload"
          :limit="limitCount"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div v-else-if="type=='image'">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="imageControl_handleSuccess"
          :http-request="uploadImage"
          :before-upload="beforeImageUpload">
          <img v-if="singleImageUploadUrl" :src="singleImageUploadUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
  </div>

</template>

<script>
let vm;
export default {
  components:{},
  props:['type','maxSize','maxCount'],
  data() {
    return {
      /**单张图片url属性
       * 需根据传入数据初始化属性
       */
      singleImageUploadUrl:'',
      /**多张图片url属性
       * 需根据传入数据初始化属性
       */
      multiImageUploadList:[],
      uploadUrl: window.config.baseUrl + "/file/upload",
      limitCount:this.maxCount||12,
    };
  },
  methods: {
    init(){
      this.$emit('input', []);
    },
    imageControl_handleSuccess(res, file) {
      
    },
    /**上传前校验 */
    beforeImageUpload(file) {
      let maxSize=this.maxSize||2;
      const isJPG = (file.type === 'image/jpeg'||file.type === 'image/gif'||file.type === 'image/png'||file.type === 'image/bmp');
      const isLt2M = file.size / 1024 / 1024 < maxSize;

      if (!isJPG) {
        this.$message.error('图片格式不支持'+file.type);
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB');
      }
      return isJPG && isLt2M;
    },
    /**
     * 自定义上传图片*单张图片
     */
    uploadImage(d){
      let file=d.file;
      // let filedName=d.data.filedName;
      let filedata = new FormData(); //创建form对象
      filedata.append('file',file,file.name);//通过append向form对象添加数据
      filedata.append('content','image-upload');//添加form表单中其他数据
      api.uploadFile(filedata).then(function(dd){
        if(dd.result="操作成功"){		          	   		
          vm.singleImageUploadUrl = dd.url;
          vm.$emit('input', [vm.singleImageUploadUrl])
        }
      });
      
    },
    /**
     * 自定义上传图片*多张图片
     */
    uploadImages(d){
      let file=d.file;
      // let filedName=d.data.filedName;
      let filedata = new FormData(); //创建form对象
      filedata.append('file',file,file.name);//通过append向form对象添加数据
      filedata.append('content','image-upload');//添加form表单中其他数据
      api.uploadFile(filedata).then(function(dd){
        if(dd.result="操作成功"){
          vm.multiImageUploadList.push({
            url:dd.url,
            name:file.name
          });
          vm.$emit('input', vm.multiImageUploadList)
        }
      });
      
    },
    imagesControlChange(file, fileList){
      
    },
    /**删除图片 */
    imagesControlRemove(file, fileList){
     
      let filedName=file.name;
      let index=-1;
      if(this.multiImageUploadList){
        this.multiImageUploadList.forEach((row,i)=>{
        if(row.uid==file.uid)
          {
            index=i;
          }
        });
        this.multiImageUploadList.splice(index,1);
        this.$emit('input', vm.multiImageUploadList);
      }
      
    },
    getImagesUrl(){
      let url=[];
      if(this.type=='image'){
        url.push(this.singleImageUploadUrl);
      }
      else{
        this.multiImageUploadList.forEach(ele=>{
          url.push(ele.url);
        });
      }
      return url;
    },
  },
  mounted() {
    vm=this;
	  this.init();
  },
  computed: {},
  watch: {},
  
};
</script>

<style lang="scss" scoped>
  .avatar-uploader {
    width: 1.48rem;
    height: 1.48rem;
    background-color: #fbfdff;
    border: 0.01rem dashed #d9d9d9;
    border-radius: 0.06rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .el-upload-list__item:not(.is-success){
      display: none !important;
    }
  }
  .avatar-uploader:hover{
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 0.28rem;
    color: #8c939d;
    width: 1.48rem;
    height: 1.48rem;
    line-height: 1.48rem;
    text-align: center;
  }
  .avatar {
    width: 1.48rem;
    height: 1.48rem;
    display: block;
  }
</style>
<style lang="scss">
  .box-images {
    .el-upload-list__item:not(.is-success){
      display: none !important;
    }
  }
</style>